import React from "react";
export default class Tab extends React.Component {
  render() {
    const { tab, active } = this.props;
    return (
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">9</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}
            {tab.map((item, index) => (
              <div
                className={
                  item.type === active ? "nav-item active" : "nav-item"
                }
                key={index}
                onClick={() => {
                  this.props.changeTab(item.type);
                }}
              >
                按{item.text}排序
              </div>
            ))}
          </li>
        </ul>
      </div>
    );
  }
}
